<template>
  <div class="img-upload-box">
    <!-- action:设置图片接口上传地址
         :http-reques：覆盖默认上传行为（覆盖action）
         file-list:图片上传列表数据，用于图片回填
         limit：上传的数量限制
         on-remove:移除图片时触发的属性-->

    <el-upload
      action="#"
      :http-request="uploadFn"
      :file-list="fileList"
      list-type="picture-card"

      :on-remove="remove"
      :on-change="onChange"

      :class="{disable:fileList.length==limit}"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress
      v-if="fileList.length > 0 && percentage !== 100"
      type="dashboard"
      :percentage="percentage"
    />
  </div>
</template>

<script>
// 引入js-sdk
import COS from 'cos-js-sdk-v5'
// 实例化cos
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKIDZy74k9H8j35qKXT8VbQyFG0TfaEafSyD',
  SecretKey: '6vTkkTv6zcy2pLaYFeneEXZ4IFuIPFn5'
})
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },

  data() {
    return {
      fileList: [],
      percentage: 0 // 图片上传进度
      // photos: []
    }
  },
  methods: {
    remove(file, fileList) {
      // 判断删除图片
      if (this.fileList.length === 1) {
        this.fileList = fileList || []
      } else {
        this.fileList = this.fileList.filter(item => {
          return item !== file
        })
      }
    },
    uploadFn(params) {
      // this.fileList.push({
      //   url: ''
      // })
      //  data:选择图片后的图片对象
      //  data.file：file属性才是文件对象
      cos.putObject({
        Bucket: 'hr-79-1313460531', /* 自己的储存桶 必须 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 储存在桶里的对象键 必须 */
        StorageClass: 'STANDARD',
        Body: params.file, // 上传文件对象
        onProgress: (progressData) => {
        //   console.log(JSON.stringify(progressData))
        // progressData.percent：为当前图片上传的进度值
          this.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        // console.log(42, err, data)
        if (!err) {
          // 上传成功

          this.fileList.forEach(image => {
            if (image.uid === params.file.uid) {
              image.url = 'https://' + data.Location
              image.status = 'success'
              // this.photos.push(image.url)
            }
          })
          // this.fileList[0].url = 'https://' + data.Location
        } else {
          // 上传失败
          console.log(err)
        }
      })
    },
    onChange(file, newFileList) {
      this.fileList = newFileList
    },
    // 编辑回填多张图时用
    editImgs(value) {
      this.fileList = []
      // console.log('编辑多张回填', value)
      this.percentage = 100
      value.forEach((item) => {
        this.fileList.push({ url: item })
      })
    },
    // 编辑回填单张图时用
    editOneImg(value) {
      this.fileList = []
      // console.log('编辑单张回填', value)
      this.percentage = 100
      this.fileList.push({ url: value })
    }
  }
}
</script>

<style lang='scss'>
.disable {
  .el-upload--picture-card {
    display: none;
  }
}
.img-upload-box {
  display: inline-block;
  position: relative;
  .el-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
